<template>
    <view class="search_top_back">
        <view class="search_top_nav">
            <view :style="{ height: statusBarHeight }" class="status_bar"></view>
            <view class="search_nav_content">
                <view @click="back" style="width: 76rpx; height: 88rpx">
                    <image
                        style="margin-left: 28rpx; height: 36rpx; width: 20rpx; margin-top: 26rpx"
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/back.png"
                    ></image>
                </view>
                <label class="search_title">{{ title }}</label>
            </view>
            <view style="height: 88rpx"></view>
            <view class="result-top">
                <view class="header-title">您的体型测评结果为：</view>
                <view class="header-title1" v-if="result != '其他'"
                    ><text>{{ result.slice(0, 1) }}</text
                    >型</view
                >
                <view class="header-title1" v-else
                    ><text>{{ result }}</text></view
                >
            </view>
        </view>
        <view>
            <view :style="{ height: statusBarHeight }" class="status_bar"></view>
            <view class="search_placeholder_view" />
        </view>
    </view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight + "px";
export default {
    name: "home-header",
    props: {
        title: "",
        result: "",
    },
    data() {
        return {
            statusBarHeight: statusBarHeight,
            selIndex: 0,
        };
    },
    methods: {
        back() {
            uni.navigateBack();
        },
        searchEvent(e) {
            this.$emit("searchKey", e.detail.value);
        },
        cancelEvent() {
            uni.hideKeyboard();
        },
    },
};
</script>

<style lang="scss" scoped>
.result-top {
    width: 100%;
    padding: 0 40rpx;
    box-sizing: border-box;
}
.result-top .header-title {
    color: #666;
    line-height: 40rpx;
    font-size: 28rpx;
    margin-top: 40rpx;
}
.result-top .header-title1 {
    font-size: 32rpx;
    color: #666;
    line-height: 50rpx;
    margin-top: 80rpx;
}
.result-top .header-title1 text {
    color: #009977;
    font-size: 160rpx;
    font-weight: 600;
    display: inline-block;
    margin-right: 20rpx;
}
.status_bar {
    height: 20px;
    width: 100%;
}
.search_nav_content {
    position: fixed;
    width: 100%;
    z-index: 998;
    height: 88rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.search_title {
    width: 180rpx;
    left: calc(50% - 90rpx);
    position: absolute;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    color: #000000;
    font-size: 32rpx;
    font-weight: 500;
}
.search_placeholder_view {
    height: 290rpx;
}
</style>
